<template>
  <div id="coupon">
    <div class="bgc">
      <van-row>
        <van-col span="24">
          <van-nav-bar title="我的优惠券" left-text="返回" left-arrow @click-left="onClickLeft" />
        </van-col>
        <van-col span="24">
          <van-tabs v-model="active" animated @change="onGetCouponList(active)">
            <van-tab title="未使用">
              <van-col span="24" class="search">
                <van-cell-group>
                  <van-field center clearable placeholder="请输入短信验证码">
                    <template #button>
                      <van-button size="small" type="primary">兑换</van-button>
                    </template>
                  </van-field>
                </van-cell-group>
              </van-col>
              <span class="explain w"> <van-icon name="question-o" /> 使用说明</span>
              <van-col span="24">
                <Coupon :CouponList="GetCouponList" />
              </van-col>
            </van-tab>
            <van-tab title="已使用">
              <span class="explain w"> <van-icon name="question-o" /> 使用说明</span>
              <van-col span="24" v-if="GetCouponList.length == 0">
                <van-empty description="无已使用优惠券" />
              </van-col>
              <van-col span="24" v-else>
                <Coupon :CouponList="GetCouponList" />
              </van-col>
            </van-tab>
            <van-tab title="已过期">
              <van-col span="24" class="search">
                <van-cell-group>
                  <van-field center clearable placeholder="请输入短信验证码">
                    <template #button>
                      <van-button size="small" type="primary">兑换</van-button>
                    </template>
                  </van-field>
                </van-cell-group>
              </van-col>
              <span class="explain w"> <van-icon name="question-o" /> 使用说明</span>
              <van-col span="24" v-if="GetCouponList.length == 0">
                <van-empty description="无过期优惠券" />
              </van-col>
              <van-col span="24" v-else>
                <Coupon :CouponList="GetCouponList" />
              </van-col>
            </van-tab>
          </van-tabs>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
import Coupon from '@/components/coupon/coupon.vue'
export default {
  name,
  data() {
    return {
      active: 0,
      isLoading: false,
      // 未使用
      GetCouponList: '',
      // 已使用
      YESCouponList: {},
      // 已过期
      OverdueCouponList: {}
    }
  },
  components: {
    Coupon
  },
  mounted() {
    this.onGetCouponList(this.active)
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    onGetCouponList(active) {
      let data = {
        status: active,
        order: 'asc'
      }
      this.$get('coupon/mylist', data).then(result => {
        if (result.data.errno !== 0) return Toast.fail('请登录')
        console.log(result)
        this.GetCouponList = result.data.data.list
      })
    }
  }
}
</script>
<style lang="less" scoped>
.search {
  margin: 20px 0px;
  .van-field__body {
    input {
      border: 1px solid #000 !important;
    }
    .van-button {
      width: 100px;
    }
  }
}
.explain {
  font-size: 13px;
  margin: 0px 5px 0px 5px;
  float: right;
  opacity: 0.5;
}
// 优惠券内容
.Coupons-centenr {
  border-bottom: 1px solid #e5e4e2;
  padding-bottom: 15px;
  .van-row {
    background: linear-gradient(to right, #cea667, #dfbb76);
    padding-top: 0.05rem;
    margin: 15px 0px;
    .Coupons-centenr-text {
      font-weight: 100;
      margin-left: 0.2rem;
      .text-p1 {
        font-size: 25px;
        color: #fff;
        margin: 28px 0px 0px 0px;
      }
      .text-p2 {
        font-size: 10px;
        font-weight: 100;
        color: #fff;
      }
    }
    .text-p3 {
      padding-left: 0.15rem;
      font-size: 13px;
      background-color: rgba(0, 0, 0, 0.1);
      color: #fff;
    }
    .top-span {
      span {
        width: 40px;
        font-size: 5px !important;
        background-color: #9c7733;
        padding: 3px 7px;
        color: #f4f4f4;
        transform: scale(0.8);
        display: block;
      }
    }
    .top-max {
      font-size: 14px;
      color: #fff;
      font-weight: 100;
      margin-left: 15px;
      margin-top: 5px;
    }
    .top-p {
      font-size: 0.3rem;
      color: #a73e25;
      margin-left: 15px;
    }
  }
}
</style>
